<template>
  <div class="view">
    <div
      class="navGroup"
      v-for="(item,index) in navDataList"
      :key="item.id"
      @mousemove="onTabs(index)"
      @mouseleave="offTabs()"
    >
      <p :class="{'navTitle':true,'onNavTitle': count == item.id }">
        <span>{{item.title}}</span>
        <i class="el-icon-arrow-right"></i>
      </p>
      <ul
        :class="{'navContentList':count == item.id && item.introduction}"
        :style="{top:topBoj(index)}"
      >
        <li
          class="navContent"
          v-for="(items,i) in item.contentList"
          :key="items.contentId"
          v-show="count == item.id && item.introduction"
        >
          <span :class="{'id':true, 'TressColor':item.introduction && i < 3}">{{i+1}}</span>
          <a
            href="javascript:;"
            :class="{'place':true, 'TressColor':item.introduction && i < 3}"
          >{{items.place}}</a>
          <a href="javascript:;" class="introduction">{{items.introduction}}</a>
        </li>
      </ul>
      <ul
        :class="{'navContentList':count == item.id && !item.introduction}"
        style="width:492px;"
        :style="{top: -41.5*index+'px'}"
      >
        <li
          class="quarterContent"
          v-for="(items) in item.contentList"
          :key="items.contentId"
          v-show="count == item.id && !item.introduction"
        >
          <p class="main">
            <span>{{items.type}}</span>
          </p>
          <span style="width: 370px;display: inline-block;">
            <a
              href="javascript:;"
              v-for="(itemP,i) in items.place"
              :key="i"
              class="branch"
            >{{itemP}}</a>
          </span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      count: null
    };
  },
  computed: {
    ...mapState(["navDataList"]),
    topBoj() {
      return function(i) {
        let top = -1;
        if (i == 0) {
          return top + "px";
        } else if (i == 1) {
          top = -42;
          return top + "px";
        } else {
          return -41.5 * i + "px";
        }
      };
    }
  },
  methods: {
    init() {
      this.$store.dispatch("reqNavDataList");
    },
    onTabs(index) {
      this.count = index;
    },
    offTabs() {
      this.count = null;
    }
  },
  mounted() {
    this.init();
  }
};
</script>

<style lang="stylus" scoped>
.view {
  .navGroup {
    width: 258px;
    color: #444;
    background-color: #fff;
    position: relative;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;

    &:last-child {
      border-bottom: 1px solid #ccc;
    }

    .navTitle {
      height: 40px;
      padding: 0 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
      position: relative;
      z-index: 67;
    }

    .onNavTitle {
      &:before {
        content: '';
        width: 4px;
        height: 100%;
        background-color: #fff;
        position: absolute;
        right: 0px;
      }
    }

    .navContentList {
      background-color: #fff;
      position: absolute;
      left: 256px;
      padding: 15px;
      width: 350px;
      box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.1);
      border-top: 1px solid #cccccc;
      border-bottom: 1px solid #cccccc;
      border-left: 1px solid #cccccc;
      height: 340px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      z-index: 66;

      .navContent {
        .id {
          width: 26px;
          display: inline-block;
          font-size: 22px;
          font-style: italic;
          color: #ccc;
          text-align: end;
        }

        .place {
          display: inline-block;
          margin: 0 10px;

          &:hover {
            text-decoration: underline;
          }
        }

        .introduction {
          color: #999;
          font-size: 14px;

          &:hover {
            text-decoration: underline;
          }
        }

        .TressColor {
          color: orange;
        }
      }

      .quarterContent {
        display: flex;
        font-size: 13px;

        .main {
          display: inline-block;
          width: 63px;
        }

        .branch {
          color: #999;
          margin-right: 15px;
          margin-bottom: 10px;
          display: inline-block;

          &:hover {
            color: orange;
            text-decoration: underline;
          }
        }
      }
    }
  }
}
</style>